<template>
	<view>
		<!-- 收货人信息 -->
		<view class="head">
			<view class="topBox">
				<view class="head_icon">
					<u-icon name="map" size="30" label-pos="center"></u-icon>
				</view>
				<view class="user_msg">
					<view class="box">
						<view class="user">
							<text>收货人:王五</text>
							<text>手机:123456</text>
						</view>
						<view class="address">
							<text>北京市 北京市昌平区 回龙观大街小区31号</text>
						</view>
					</view>
				</view>
				<view class="arrows">
					<u-icon name="arrow-right" size="20" label-pos="center"></u-icon>
				</view>
			</view>
			<view class="secondBox">
				<view class="imgBox">

				</view>
				<view class="goodsMsg">
					<view class="goodsN">
						<text class="goodsName">2018年新款冲锋衣秋冬款新品推荐 户外冲锋衣</text>
						<text class="goodsChoose">红色 L</text>
					</view>
					<view class="goodsPrice">
						<text class="Price">￥229</text>
						<text class="num">× 1</u-icon></text>
					</view>
				</view>
			</view>
			<view style="margin: auto;  width: 700rpx;height:1rpx; background-color: darkgray;"></view>
			<view class="payBox">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth=80>
					<u-form-item label="购买数量" borderBottom>
						<u-number-box v-model="value" @change="valChange"></u-number-box>
					</u-form-item>
					<u-form-item label="优惠" borderBottom @click="openDiscounts()">
						<u--text :lines="1" text="可使用10公里徒步里程减100元"></u--text>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="配送方式" prop="userInfo.name" borderBottom @click="openDistribution()">
						<u--text :lines="1" text="邮递 免邮"></u--text>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="买家留言" prop="userInfo.name" borderBottom>
						<u--input border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>
			<view class="payBtn">
				<view class="li1">
					<text>共 1 件,合计: ￥129 </text>
				</view>
				<view class="li2">
					<text>结算</text>
				</view>
			</view>
			<!-- 优惠选择组件 -->
			<AddDiscounts :show='show' @closeDiscounts='closeDiscounts'></AddDiscounts>
			<AddDistribution :show2='show2' @loseDistribution='loseDistribution'></AddDistribution>
		</view>
	</view>
</template>

<script>
	import AddDiscounts from './AddDiscounts.vue' //选择优惠组件
	import AddDistribution from './AddDistribution.vue'//选择配送方式
	export default { 
		data() {
			return {
				show: false, //优惠弹出默认布尔值
				show2: false, //配送弹框默认布尔值
			};
		},
		methods: {
			//显示购买数量的方法
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			//显示优惠弹框
			openDiscounts() {
				this.show = true
				console.log('点击了');
			},
			//关闭优惠弹框
			closeDiscounts(data){
				console.log(data);
				this.show = data
				console.log('点击关闭弹框');
			},
			//显示配送弹框
			openDistribution(){
				this.show2 = true
				console.log('点击了');
			},
			//关闭配送弹框
			loseDistribution(data){
				this.show2 = data
			}
		},
		components: {
			AddDiscounts,
			AddDistribution,
		}
	}
</script>

<style scoped lang="less">
	@import 'css/orderSureCss.less';
</style>
